
<template>
  <!-- -------//进度条----- -->
  <div class='popContainer'>
    <a-progress type="circle" :stroke-color="{
        '0%': '#108ee9',
        '100%': '#87d068',
      }" :percent="jindu" />
  </div>
</template>
<script>
import moment from 'moment'
import OSS from 'ali-oss'
export default {
  props: ['file'],
  data() {
    return {
      jindu:0
    }
  },
  watch: {},
  mounted(){
   this.open(this.file)
  },
  methods: {

    open(file) {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onloadend = () => {
        // 使用ossupload覆盖默认的上传方法
        this.UploadToOssmultipartUpload('fzydd', file).then((data) => {
         
          this.$emit('uploadSuccessEvent',data)
         
        })
      }
    },
    // 开始分片上传。
  UploadToOssmultipartUpload(path, file) {
    const url = uploadPath(path, file)
    //分片上传   
    const progress = (p, _checkpoint) => {
     let tempCheckpoint = _checkpoint
     this.jindu = Math.round(p *100)
    //  console.log('1000000:', this.jindu)
  
    }
    return new Promise((resolve, reject) => {
    client().multipartUpload(url, file, {
      progress,
      // meta是用户自定义的元数据，通过head接口可以获取到Object的meta数据。
      meta: {
        year: 2020,
        people: 'user',
      }
     }).then(data => {
      // 执行成功是返回 多个参数返回时用数组
      resolve(data);
     }).catch(error => {
      reject(error)
     })
    // client.head(path);
   })
}
  },
}


const token = {
  access_key_id: 'LTAI4Fdqx1ubZUKst9WnKU9w', // oss的key_id
  access_key_secret: 'zkvcPZCVxFHdkYQAg3c2aX1nJONyvl', // oss的secret
  OSS_ENDPOINT: 'oss-cn-shenzhen', // 自己oss服务器的配置信息
  OSS_BUCKET: 'gangmao', // 自己oss服务器的配置信息
}

const client = () => {
  return OSS({
    accessKeyId: token.access_key_id,
    accessKeySecret: token.access_key_secret,
    region: token.OSS_ENDPOINT, // ststoken: '96321457845446554',
    bucket: token.OSS_BUCKET,
  })
}

const uploadPath = (path, file) => {
  // 上传文件的路径，使用日期命名文件目录
  return `${path}/${moment().format('YYYYMMDD')}/${file.name.split('.')[0]}.${file.name.split('.')[1]}`
  // return `android.${file.type.split("/")[1]}`
}







</script>
<style >
.popContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  line-height: 800px;
  z-index: 9999;
}
</style>